import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm, Select  } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
import ArrivalDetailModal from '../../components/equipment/ArrivalDetailModal';
import ViewModal from '../../components/equipment/ViewModal';
import CheckAssetModal from '../../components/equipment/CheckAssetModal';

function Arrival({ dispatch, arrival, loading, form }) {
  
const { getFieldDecorator, getFieldsValue, getFieldValue } = form;

const { currentItem,modalViewVisible,detailModalType,assetModelList,assetTypeTree,assetBrandList,modalDetailVisible,detailInfoModalType,modalDetailInfoVisible } = arrival

  const columns = [{
    title: '清单号',
    dataIndex: 'id_',
    key: 'id_',
    width: 120,
  },{
    title: '合同号',
    dataIndex: 'contractNo',
    key: 'contractNo',
    width: 120,
  },{
    title: '供应商',
    dataIndex: 'supplier',
    key: 'supplier',
    width: 130,
  },{
    title: '联系人',
    dataIndex: 'contacts',
    key: 'contacts',
    width: 80,
  },{
    title: '联系电话',
    dataIndex: 'contactsPhone',
    key: 'contactsPhone',
    width: 100,
  },{
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 60,
    render: (value, row, index) => {
        return (
            value==1?"未处理":value==2?"处理中":value==3?"已完成":''
        )
      }
  },{
    title: '机房',
    dataIndex: 'roomName',
    key: 'roomName',
    width: 120,
  },{
    title: '操作员',
    dataIndex: 'createUser',
    key: 'createUser',
    width: 80,
  },{
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 100,
  },{
    title: '操作',
    key: 'operation',
    width: 60,
    render: (text, record) => (
        <span>
             {(record.status==3)?(
                <a onClick={onViewItem.bind(null, record.id_)}>查看</a>
             ):<a onClick={onEditItem.bind(null, record.id_)}>处理</a>}
        </span>
    ),
  }];

  const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 10 },
  };

  function handleClear(){
    form.resetFields();
  }
  // 处理验收
  const onEditItem = (presetId) => {
    dispatch({
      type: 'arrival/qryDetailById',
      payload:presetId,
    })
  }

 //查看
  const onViewItem = (presetId) => {
    dispatch({
      type: 'arrival/viewDetail',
      payload:presetId,
    })
  }

  const modalDetailProps = {
        item: detailModalType === 'create' ? {} : arrival.currentItem,
        visible: modalDetailVisible,
        type: detailModalType,
        roomList:arrival.roomList,
        detailList:arrival.detailList,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: detailModalType === 'create' ? '' : <div style={{fontSize:'16px'}}><span>清单号:{arrival.currentItem.id_}</span><span style={{paddingLeft:'15px'}}>合同号:{arrival.currentItem.contractNo}</span><span style={{paddingLeft:'15px'}}>供应商:{arrival.currentItem.supplier}</span></div>,
        wrapClassName: 'vertical-center-modal',
        newKey : arrival.newKey,
        onOk (data) {
          dispatch({
              type: `arrival/${detailModalType}`,
              payload: data,
          })
        },
        onCancel () {
          dispatch({
              type: 'arrival/reload',
              payload:{}
          })
       },
       onSelectDetailInfo (data) {
          dispatch({
              type: 'arrival/qryDetailInfoById',
              payload: {id:data},
          })

       },
  }

  const modalViewProps = {
        item:  arrival.currentItem,
        visible: modalViewVisible,
        detailList:arrival.detailList,
        maskClosable: false,
        confirmLoading: loading,
        title:<div style={{fontSize:'16px'}}><span>清单号:{arrival.currentItem.id_}</span><span style={{paddingLeft:'15px'}}>合同号:{arrival.currentItem.contractNo}</span><span style={{paddingLeft:'15px'}}>供应商:{arrival.currentItem.supplier}</span></div>,
        wrapClassName: 'vertical-center-modal',
        newKey : arrival.newKey1,      
        onCancel () {
          dispatch({
              type: 'arrival/hideInfoModal'
          })
       },  
  }

   const checkModalProps = {
        item: detailInfoModalType === 'createDetail' ? {} : arrival.currentInfoItem,
        visible: modalDetailInfoVisible,
        type: detailInfoModalType,
        roomType:arrival.roomType,
        roomList:arrival.roomList,
        presetId:arrival.presetId,
        rackList:arrival.rackList,
        deptList:arrival.deptList,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: detailModalType === 'createDetail' ? '' : <div style={{fontSize:'16px'}}><span>设备名称:{arrival.currentInfoItem.assetName}</span><span style={{paddingLeft:'15px'}}>型号:{arrival.currentInfoItem.modelName}</span></div>,
        wrapClassName: 'vertical-center-modal',
        newKey : arrival.newKey2,
        onOk (data) {
          dispatch({
              type: 'arrival/doCheck',
             payload: {data:data,presetId:arrival.presetId},
          })
        },
        onCancel () {
          dispatch({
              type: 'arrival/hideDetailInfoModal',
          })
        },
  }

  const pagination = {
    current:arrival.current,
    pageSize:arrival.currentSize,
    total: arrival.total,
    showSizeChanger: true,
    showTotal: (total => '共' + arrival.total + '条'),
    onShowSizeChange(current, size) {
      dispatch({
        type: 'arrival/queryPreset',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
      });
    },
    onChange(current) {
      dispatch({
        type: 'arrival/queryPreset',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':arrival.currentSize} },
      });
    },
  };

 const submitHandle = () => {
    dispatch({
        type: 'arrival/queryPreset',
        payload: { ...getFieldsValue() },
    });
  }

  let roomsList = [];
  for (let i = 0; i < arrival.roomList.length; i++) {
    roomsList.push(<Option key={arrival.roomList[i].id_}>{arrival.roomList[i].name}</Option>);
  }

    return (
      <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >
                         <FormItem>
                            {getFieldDecorator('roomId')(
                                <Select
                                showSearch
                                style={{ width: 200 }}
                                placeholder="选择机房/库房"
                                optionFilterProp="children"
                            >
                                <Option value="">全部</Option>
                                {roomsList}
                            </Select>
                            )}
                       </FormItem>

                      <FormItem>
                         {getFieldDecorator('status')(
                                <Select
                                showSearch
                                style={{ width: 200 }}
                                placeholder="选择状态"
                                optionFilterProp="children"
                            >
                              <Option value="">全部</Option>
                              <Option value="1">未处理</Option>
                              <Option value="2">处理中</Option>
                              <Option value="3">已完成</Option>
                            </Select>
                        )}
                      </FormItem>
                      <FormItem>
                          <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                      </FormItem>
                      <FormItem>
                         <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                      </FormItem>
                </Form>
            </div>
            <div style={{width:'100%',padding:"30px 20px",}}>
                <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={arrival.list} pagination={pagination}
                />
            </div>
           <ViewModal {...modalViewProps} />
           <ArrivalDetailModal {...modalDetailProps} />
           <CheckAssetModal {...checkModalProps} />
       </div>
     </div>
  );
}

function mapStateToProps(state) {
  return { arrival : state.arrival,loading:state.loading.models.arrival};
}

Arrival = Form.create()(Arrival);

export default connect(mapStateToProps)(Arrival);
